<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('upload')" />
</head>

<body>

<!-- html start -->
<div class="container">
<div id="suggestDlgDiv">
    <form id="suggestForm" class="form-horizontal">
        <div class="form-group">
            <label for="suggestType" class="col-sm-4 control-label" data-locale-html="upload.label.type"></label>
            <div class="col-sm-8">
                <input id="suggestType" name="suggestType" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label for="file0" class="col-sm-4 control-label" data-locale-html="upload.label.file"></label>
            <div class="col-sm-8">
                <input id="file0" type="file" style="display: none;" onchange="changeFile(this)"/>
                <div class="input-group">
                    <input id="fileView" type="text" class="form-control" readonly>
                    <div class="input-group-addon" onclick="selectFile()" style="background-color:#fff" data-locale-html="upload.label.selectFile"></div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="col-sm-4 control-label"><span class="require">*</span><span data-locale-html="upload.label.remark"></span></label>
            <div class="col-sm-8">
                <textarea id="remark" name="remark" class="form-control" rows="3"
                                      maxlength="1000"
                                      data-msg-containerid="remark-error"></textarea>
                <div id="remark-error"></div>
            </div>
        </div>
    </form>
</div>
    <input type="button" value="uploadForm" onclick="uploadForm()">
    <input type="button" value="downloadCsv" onclick="downloadCsv()"/>
    <input type="button" value="downloadExcel" onclick="downloadExcel()"/>
</div>
<!-- html end -->

<th:block th:include="common/include :: footer" />

<!-- js start -->
<script>
    function checkFile(file) {
        return file.size>0 && file.size<10 * 1024 * 1024;
    }
    function uploadForm() {
        var type = $("#suggestType").val();
        var file = $("#file0")[0].files[0];
        var remark = $("#remark").val();
        var formData = new FormData();
        formData.append("type",type);
        formData.append("file",file);
        formData.append("remark",remark);
        if(file){
            if(!checkFile(file)){
                alert("file size is limited");
                return;
            }
        }
        $.ajax({
            type: "post", dataType: "json", contentType: false, processData: false,  data: formData,
            url: ctx+"uploadFileWithForm",
            success: function (data) {
                console.log("add:result:",data.code+":"+data.msg);
                if(data.code==0){
                    $("#file0").val("");
                    $("#fileView").val("");
                    $("#remark").val("");
                    alert("upload success");
                }else{
                    alert("failed:"+data.code);
                }
            },
            error: function (e) {
                alert("error:"+e);
            }
        });
    }
    function selectFile(){
        document.getElementById("file0").click();
    }
    function changeFile(obj) {
        var fileId = obj.id;
        var file = document.getElementById(fileId).files[0];
        var fileName = file.name;
        if(!checkFile(file)){
            alert("file size limited 10m");
            return;
        }
        $("#fileView").val(fileName);
    }

    function downloadCsv() {
        const url = ctx+"downloadToCsv";
        const form = document.createElement('form');
        form.id = "dlForm";
        form.style.display = 'none';
        form.target = '';
        form.method = 'post';
        form.action = url;
        var submitObj = new Object();
        submitObj.beginTime = "aaa";
        submitObj.endTime = "bbb";
        var statData = JSON.stringify(submitObj);
        var params={"statData":statData};
        for (var key in params) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = params[key];
            form.appendChild(input);
        }
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
        
    }
    function downloadExcel() {
        const url = ctx+"downloadToExcel";
        const form = document.createElement('form');
        form.id = "dlForm";
        form.style.display = 'none';
        form.target = '';
        form.method = 'post';
        form.action = url;
        var submitObj = new Object();
        submitObj.beginTime = "aaa";
        submitObj.endTime = "bbb";
        var statData = JSON.stringify(submitObj);
        var params={"statData":statData};
        for (var key in params) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = params[key];
            form.appendChild(input);
        }
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
    $(function () {
        initLang();
    });
</script>
<!-- js end -->
</body>
</html>